<template>
	<view>
		<view class="request-img">
			<img src="../../static/my/qingjia.jpg" alt="" style="width: 100%;height: 100%;" />
		</view>
		<view class="request-zhu">
			注：请假单必须在上课30分钟之前提交！
		</view>

		<view class="stu-form">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="type" label-width="200rpx" label="请假类型" :required="true">
					<u-radio-group v-model="form.type" placement="row" @change="groupChange">
						<u-radio style="margin-right: 10px;" label="事假" name="0"> 事假</u-radio>
						<u-radio style="margin-right: 10px;" label="病假" name="1"> 病假</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item prop="course" label-width="200rpx" label="请假课程" :required="true">
					<view @tap="courseShowBtn">
							<view v-if="form.courseName">
								{{form.courseName}}
							</view>
							<view v-else >
								请选择课程
							</view>
					</view>
				
				</u-form-item>
				<u-select v-model="courseShow" :list="courseList" @confirm="confirm"></u-select>
				<u-form-item prop="askLeaveDateName" label-width="200rpx" label="请假时间" :required="true">
					<view @tap="askLeaveDateShowBtn">
						<view v-if="form.askLeaveDateName">
							{{form.askLeaveDateName}}
						</view>
						<view v-else >
							请选择时间
						</view>
					</view>
					
				</u-form-item>
				<u-select v-model="askLeaveDateShow" :list="askLeaveDateList" @confirm="askLeaveDateconfirm"></u-select>
				<u-form-item prop="content" label-width="200rpx" label="请假事由" :required="true">
					<u-input v-model="form.content" placeholder="请输入请假事由" />
				</u-form-item>
			</u-form>
			<u-button @click="submit" type="primary">提交请假单</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getApplicationCourseList,
		traineeAskLeave,
		findByCourseId
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				form: {
					type: '',
					courseName: '',
					content: '',
					traineeCourseId: '',
					calendarId: '',
					askLeaveDate: '',
					askLeaveDateName: '',
					calendarId:''
				},
				rules: {
					type: [{
						required: true,
						message: '请选择请假类型',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					courseName: [{
						required: true,
						message: '请选择请假课程',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					askLeaveDateName: [{
						required: true,
						message: '请选择请假时间',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					content: [{
						required: true,
						message: '请填写请假事由',
						trigger: ['change', 'blur'],
					}],
				},
				courseShow: false,
				askLeaveDateShow: false,
				askLeaveDateList: [],
				courseList: [],
				courseListRes: []
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getApplicationCourseList()
			
		},
		methods: {
			askLeaveDateShowBtn() {
				this.askLeaveDateShow = true
			},
			async findByCourseId(id) {
				uni.showLoading()
				const data = {
					traineeCourseId:id
				}
				const res = await findByCourseId(data)
				if (res.code == 200) {
					uni.hideLoading()
			       
					this.askLeaveDateList= res.data.map(v=>{
						return {
							label:v.goClassDate+ "("+this.getWeek(v.goClassDate) +")"+this.form.courseName,
							value:v.id
						}
					})
							console.log("res.rows",this.askLeaveDateList);
					// console.log("arr",arr);
					// this.courseListRes = res.rows
					// this.courseList = res.rows.map(v => {
					// 	return {
					// 		label: v.courseName,
					// 		value: v.courseId
					// 	}
					// })
				}
			},
			getWeek (date) { // 参数时间戳
			      let week =  this.$moment(date).isoWeekday()
			      switch (week) {
			        case 1:
			          return '周一'
			        case 2:
			          return '周二'
			        case 3:
			          return '周三'
			        case 4:
			          return '周四'
			        case 5:
			          return '周五'
			        case 6:
			          return '周六'
			        case 7:
			          return '周日'
			      }
			    },
			async getApplicationCourseList() {
				uni.showLoading()
				const data = {
					pageSize: 999,
					pageNum: 1
				}
				const res = await getApplicationCourseList(data)
				if (res.code == 200) {
					uni.hideLoading()
					this.courseListRes = res.rows
					this.courseList = res.rows.map(v => {
						return {
							label: `${v.courseName}(剩余请假：${v.askLeaveNumber===999 ?'不限':v.askLeaveNumber})`,
							value: v.courseId
						}
					})
				}
			},
			submit() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						uni.showLoading()
						console.log('验证通过', this.form);
						const res = await traineeAskLeave(this.form)
						if (res.code == 200) {
							uni.hideLoading()
							uni.showToast({
								title: '请假成功'
							})
							uni.setStorageSync('loading',1)
							uni.navigateBack()
						}

					} else {
						console.log('验证失败');
					}
				});
			},
			courseShowBtn() {
				this.courseShow = true
			},
			confirm(e) {
				this.form.courseName = e[0].label
				this.form.traineeCourseId = e[0].value
				const result = this.courseListRes.find(r => r.courseId == this.form.traineeCourseId)
				this.form.calendarId = result.id
				this.findByCourseId(result.id)
			},
			askLeaveDateconfirm(e) {
				
				this.form.askLeaveDateName = e[0].label
				this.form.calendarId = e[0].value
				this.form.askLeaveDate = e[0].label.slice(0,10)
			
			
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style>
	.request-img {
		height: 200rpx;
	}

	.request-zhu {
		font-weight: bold;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.stu-form {
		padding: 20rpx;
	}
</style>